<template>
  <!--导航-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备类型设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!--搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form inline>
        <el-form-item label="类型名称">
          <el-input v-model="typeQuery.machineTypeName"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select style="width: 100px" v-model="typeQuery.machineTypeStatus">
            <el-option label="全部"/>
            <el-option :value="1" label="是"/>
            <el-option :value="2" label="否"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadMachineType" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="type" border stripe
                row-key="machineTypeId"
                lazy
                :load="loadChildrenType"
                :tree-props="{ children: 'children',hasChildren:'hasChildren'}"
                ref="typeTable">
        <el-table-column prop="machineTypeCode" label="设备类型编码"/>
        <el-table-column prop="machineTypeName" label="设备类型名称"/>
        <el-table-column prop="machineTypeStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.machineTypeStatus == 1">是</el-tag>
            <el-tag type="warning" v-if="scope.row.machineTypeStatus == 2">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="machineTypeNotes" label="备注"/>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-link  style="margin: 0px 5px" @click="addRowType(scope.row)" type="primary">
              <el-icon>
                <Plus/>
              </el-icon>
              新增
            </el-link>
            <el-link  style="margin: 0px 5px" @click="updateRowType(scope.row.machineTypeId)"  type="primary">
              <el-icon>
                <EditPen/>
              </el-icon>
              编辑
            </el-link>
            <el-link  style="margin: 0px 5px" @click="deleteMachineType(scope.row.machineTypeId)" type="primary">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!--行新增-->
  <el-dialog v-model="addTypeWinDialogVisible"
             title="新增子类型"
             width="50%"
  >
    <template #default>
      <el-form :model="newType" label-width="auto">
        <el-form-item label="设备类型编码">
          <el-input v-model="newType.machineTypeCode"/>
        </el-form-item>
        <el-form-item label="设备类型名称">
          <el-input v-model="newType.machineTypeName"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select style="width: 100px" v-model="newType.machineTypeStatus">
            <el-option :value="1" label="是"/>
            <el-option :value="99" label="否"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newType.machineTypeNotes"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="addTypeWinDialogVisible = false; newType = {}">取消</el-button>
      <el-button type="primary" @click="addType">确定</el-button>
    </template>
  </el-dialog>

  <!--编辑子组件-->
  <TypeEdit :machineTypeId="updateMachineTypeId" @editComplate="loadTypeList"/>

</template>

<script setup>
import {ArrowRight, Delete, EditPen, Plus} from "@element-plus/icons-vue";
import {onBeforeMount, ref} from "vue";
import typeRequest from "@/api/type.js"
import {ElMessage, ElMessageBox} from "element-plus";
import TypeEdit from "@/views/machineType/machineTypeEdit.vue"

let type = ref([]);
let typeTable = ref([]);
let typeQuery = ref({});
let addTypeWinDialogVisible = ref(false);
let newType =ref({});
let curTask = ref(0);
let updateMachineTypeId = ref(-1);

//行删除
function deleteMachineType(machineTypeId){
  ElMessageBox.confirm(
      '您确定要删除吗',
      'Warning',
      {
        confirmButtonClass:'是的',
        cancelButtonClass:'取消',
        type:'warning',
      }
  ).then(()=>{
    typeRequest.deleteMachineType(machineTypeId,res=>{
      console.log(res.code);
      if (res.code == 200){
        ElMessage({
          type:"success",
          message:"操作完成"

        })
        loadTypeList(0);
      }else {
        ElMessage({
          type:"warning",
          message:"此类型包含子类型"
        })
      }
    })
    loadTypeList(0);
  })
}
//行编辑
function updateRowType(machineTypeId){
  updateMachineTypeId.value = machineTypeId;
}
//行新增类型
function addRowType(row){
  curTask.value = row.machineTypeId;
  typeRequest.updateTypeParent(row.machineTypeId);
  addTypeWinDialogVisible.value = true;
}
function addType(){
  newType.value.typeParent = 0;
  newType.value.typeParentId = curTask.value;
  typeRequest.addType(newType.value,res=>{
    if (res.code == 200){
      ElMessage({
        type:"success",
        message:"添加成功"
      })
    }else {
      ElMessage({
        type:"warning",
        message:"添加失败"
      })
    }
    addTypeWinDialogVisible.value=false;
    newType.value = {};
  })
  loadTypeList(0);
}
/**
 * 加载子任务列表
 * @param type 当前这一行数据对象
 * @param node  树节点
 * @resole 函数，用来将我们的数据加入到列表中
 */
function loadChildrenType(type , node , resole){
  typeRequest.loadMachineType(type.machineTypeId,res=>{
    resole(res.data);
  })
}

//任务栏查询
function loadMachineType(){
  typeRequest.queryType(typeQuery.value,res=>{
    if (res.code == "200"){
      ElMessage({
        type:"success",
        message:"查询成功"
      })
      type.value=res.data;
    }else {
      ElMessage({
        type:"error",
        message:"查询失败"
      })
    }
  })
}

function loadTypeList(parentId){
  typeRequest.loadMachineType(parentId,res=>{
    type.value = res.data;
  })
}

onBeforeMount(()=>{
  loadTypeList(0);
})
</script>

<style scoped>

</style>